<template>
  <div class="app-container question-new">
    <!-- TAG：卡片 -->
    <el-card>
      <!-- 卡片标题 -->
      <div slot="header">试题录入</div>
      <!-- TAG：表单 -->
      <el-form label-width="120px" ref="form" :model="qsForm" :rules="qsRules">
        <!-- TAG：学科 -->
        <el-form-item label="学科" prop="subjectID">
          <el-select style="width:400px" v-model="qsForm.subjectID">
            <el-option
              v-for="(subjectOption, index) in subjectOptions"
              :key="index"
              :label="subjectOption.label"
              :value="subjectOption.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：目录 -->
        <el-form-item label="目录" prop="catalogID">
          <el-select style="width:400px" v-model="qsForm.catalogID">
            <el-option
              v-for="(catalogOption, index) in catalogOptions"
              :key="index"
              :label="catalogOption.label"
              :value="catalogOption.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：企业 -->
        <el-form-item label="企业" prop="enterpriseID">
          <el-select style="width:400px" v-model="qsForm.enterpriseID">
            <el-option
              v-for="(enterpriseOption, index) in enterpriseOptions"
              :key="index"
              :label="enterpriseOption.company"
              :value="enterpriseOption.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：城市 -->
        <el-form-item label="城市" prop="province">
          <el-select
            @change="cityFn()"
            v-model="qsForm.province"
            style="width:400px"
          >
            <el-option
              v-for="(cityOption, index) in cityOptions"
              :key="index"
              :label="cityOption"
              :value="cityOption"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：地区 -->
        <el-form-item label="地区" prop="city">
          <el-select v-model="qsForm.city" style="width:400px">
            <el-option
              v-for="(areaOption, index) in areaOptions"
              :key="index"
              :label="areaOption"
              :value="areaOption"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：方向 -->
        <el-form-item label="方向" prop="direction">
          <el-select style="width:400px" v-model="qsForm.direction">
            <el-option
              v-for="(directionOption, index) in directionOptions"
              :key="index"
              :label="directionOption"
              :value="directionOption"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：题型 -->
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="qsForm.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- TAG：难度 -->
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="qsForm.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- TAG：题目(富文本编辑器) -->
        <el-form-item label="题目" prop="question">
          <quillEditor
            v-model="qsForm.question"
            :options="editorOptions"
          ></quillEditor>
        </el-form-item>
        <!-- TAG：选项 -->
        <el-form-item
          v-if="qsForm.questionType !== '3'"
          label="选项"
          prop="options"
        >
          <div
            class="option_item"
            v-for="option in qsForm.options"
            :key="option.code"
          >
            <!-- 单选 -->
            <el-radio
              v-if="qsForm.questionType === '1'"
              style="margin-right:0"
              :label="true"
              v-model="option.isRight"
              @change="changeRadio(option)"
            >
              {{ option.code }}：
            </el-radio>
            <!-- 多选 -->
            <el-checkbox
              v-if="qsForm.questionType === '2'"
              v-model="option.isRight"
              style="margin-right:0"
              :label="true"
              >{{ option.code }}：
            </el-checkbox>
            <el-input v-model="option.title" style="width:240px"></el-input>
            <!-- 文件上传 -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="
                (res, file) => {
                  uploadSuccess(option, res, file);
                }
              "
            >
              <img v-if="option.img" :src="option.img" class="avatar" />
              <span v-else>上传图片</span>
              <i class="el-icon-circle-close"></i>
            </el-upload>
          </div>
          <!-- 增加选项与答案 -->
          <el-button
            :disabled="qsForm.questionType !== '2'"
            type="danger"
            size="small"
            @click="addOption"
            >+增加选项与答案</el-button
          >
        </el-form-item>
        <!-- TAG：解析视频 -->
        <el-form-item label="解析视频">
          <el-input v-model="qsForm.videoURL" style="width:400px"></el-input>
        </el-form-item>
        <!-- TAG：答案解析 -->
        <el-form-item label="答案解析" prop="answer">
          <quillEditor
            v-model="qsForm.answer"
            :options="editorOptions"
          ></quillEditor>
        </el-form-item>
        <!-- TAG：题目备注 -->
        <el-form-item label="题目备注">
          <el-input
            v-model="qsForm.remarks"
            type="textarea"
            style="width:400px"
            :rows="4"
          ></el-input>
        </el-form-item>
        <!-- TAG：试题标签 -->
        <el-form-item label="试题标签">
          <el-select
            v-model="qsForm.tags"
            style="width:400px"
            placeholder="请选择试题标签"
          >
            <el-option
              v-for="(tagsOption, index) in tagsOptions"
              :key="index"
              :label="tagsOption.label"
              :value="tagsOption.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- TAG：确认提交 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 引入富文本编辑器插件相关样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入富文本编辑器插件的组件
import { quillEditor } from 'vue-quill-editor'

// 引入语法高亮插件
import hljs from 'highlight.js'
// 引入语法高亮插件相关样式
import 'highlight.js/styles/vs2015.css'

// 引入获取本地token的方法
import { getToken } from '@/utils/auth'

// 引入获取学科选项数据的请求方法
// 引入获取目录选项数据的请求方法
// 引入获取企业选项数据的请求方法
// 引入获取试题标签选项数据的请求方法
// 引入试题录入的请求方法
import {
  getSubjectOptions,
  getCatalogOptions,
  getCompanyOptions,
  getTagOptions,
  addQuestion
} from '@/api/hmmm/xiezhiqiang'

// 引入获取目录选项数据的请求方法
// import { getCatalogOptions } from '@/api/hmmm/xiezhiqiang'

// 引入获取企业选项数据的请求方法
// import { getCompanyOptions } from '@/api/hmmm/xiezhiqiang'

// 引入获取所有城市、以及获取城市对应地区的方法
import { getCityOptions, getAreaOptions } from '@/api/hmmm/citys'

// 引入方向相关数据
import { direction } from '@/api/hmmm/constants'

// 引入获取试题标签选项数据的请求方法
// import { getTagOptions } from '@/api/hmmm/xiezhiqiang'

// 引入试题录入的请求方法
// import { addQuestion } from '@/api/hmmm/xiezhiqiang'

export default {
  name: 'entryOfTestQuestions',
  components: {
    // 注册富文本编辑器的组件
    quillEditor
  },
  data () {
    return {
      // 用户token值
      token: getToken(),

      // 富文本编辑器配置项
      editorOptions: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ],
          // 配置语法高亮
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      },

      // 表单对象
      qsForm: {
        // 当前选中学科的ID
        subjectID: '',
        // 当前选中目录
        catalogID: '',
        // 当前选中企业
        enterpriseID: '',
        // 当前选中城市
        province: '',
        // 当前选中城市对应的地区
        city: '',
        // 当前选中方向
        direction: '',
        // 当前选中题型
        questionType: '1',
        // 当前选中难度
        difficulty: '1',
        // 当前输入的题目内容
        question: '',
        // 选项
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        // 当前输入的视频解析地址
        videoURL: '',
        // 当前输入的答案解析
        answer: '',
        // 当前输入的题目备注
        remarks: '',
        // 当前选中的试题标签
        tags: ''
      },

      // 校验规则
      qsRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [{ required: true, message: '请输入题目', trigger: 'blur' }],
        answer: [
          { required: true, message: '请输入题目的解析答案', trigger: 'blur' }
        ]
      },

      // 学科选项 相关数据
      subjectOptions: [],
      // 目录选项 相关数据
      catalogOptions: [],
      // 企业选项 相关数据
      enterpriseOptions: [],
      // 城市选项 相关数据
      cityOptions: getCityOptions(),
      // 地区选项 相关数据
      areaOptions: [],
      // 方向选项 相关数据
      directionOptions: direction,
      // 试题标签选项 相关数据
      tagsOptions: []
    }
  },
  created () {
    // 页面初始化时调用获取学科相关选项的数据
    this.getSubjectOptions()
    // 页面初始化时调用获取企业相关选项的数据
    this.getCompanyOptions()
  },
  methods: {
    // 点击选项的单选按钮时触发
    changeRadio (option) {
      this.qsForm.options.forEach(item => {
        item.isRight = false
      })
      option.isRight = true
    },
    // 上传文件成功后触发
    uploadSuccess (option, res, file) {
      option.img = URL.createObjectURL(file.raw)
    },
    // 点击确认提交时触发
    onSubmit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          await addQuestion({ ...this.qsForm })
          // 重置表单（部分表单无法清除）
          this.$refs.form.resetFields()
          // 重置选项
          this.qsForm.options = [
            { isRight: false, code: 'A', title: '', img: '' },
            { isRight: false, code: 'B', title: '', img: '' },
            { isRight: false, code: 'C', title: '', img: '' },
            { isRight: false, code: 'D', title: '', img: '' }
          ]
          // 重置视频解析地址
          this.qsForm.videoURL = null
          // 重置题目备注
          this.qsForm.remarks = null
          // 重置试题标签
          this.qsForm.tags = null
          this.$message.success('添加成功')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取学科相关数据的方法
    async getSubjectOptions () {
      const res = await getSubjectOptions()
      this.subjectOptions = res.data
    },
    // 根据学科ID获取目录相关数据的方法
    async getCatalogOptions () {
      const res = await getCatalogOptions({ subjectID: this.qsForm.subjectID })
      this.catalogOptions = res.data
    },
    // 根据学科ID获取试题标签相关数据的方法
    async getTagOptions () {
      const res = await getTagOptions({ subjectID: this.qsForm.subjectID })
      this.tagsOptions = res.data
    },
    // 获取企业相关数据的方法
    async getCompanyOptions () {
      const res = await getCompanyOptions({ pagesize: 10000 })
      this.enterpriseOptions = res.data.items
    },
    // 获取选择城市对应的地区
    cityFn () {
      // 每次需要清空对应地区
      this.qsForm.city = null
      this.areaOptions = getAreaOptions(this.qsForm.province)
    },
    // 点击增加选项时触发
    addOption () {
      this.qsForm.options.push({
        isRight: false,
        code: String.fromCharCode(65 + this.qsForm.options.length),
        title: '',
        img: ''
      })
    }
  },
  watch: {
    'qsForm.subjectID' () {
      this.getCatalogOptions()
      this.getTagOptions()
    }
  }
}
</script>

<style scoped lang="scss">
// 试题录入容器类名
.question-new {
  // 设置富文本编辑器的高度
  ::v-deep .ql-editor {
    height: 200px;
  }
}
// .question-new ::v-deep .ql-toolbar.ql-snow {
//   padding: 0 8px;
// }

// 选项容器的样式
.option_item {
  padding-bottom: 20px;
}

// 图片上传微调样式（保持在一行）
.avatar-uploader {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

// 图片上传的总体形状样式
.question-new {
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 60px;
    line-height: 60px;
  }
}

// 鼠标悬停在图片上传上的边框样式
.question-new {
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
}

// 取消上传的叉叉图标样式
.question-new {
  ::v-deep .avatar-uploader i {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    background: #fff;
    font-size: 18px;
    color: #999;
  }
}

// 上传的图片显示样式
.avatar {
  width: 800px;
  height: 60px;
  display: block;
  // overflow: hidden;
}
</style>
